import React, { useState } from 'react';
import { SortableContainer, SortableElement } from 'react-sortable-hoc';
import arrayMove from 'array-move';

const styles = {
  container: {
    width: '300px',
    margin: '0 auto',
  },
  list: {
    padding: 0,
    margin: 0,
    listStyleType: 'none',
  },
  item: {
    padding: '16px',
    margin: '4px 0',
    backgroundColor: '#f0f0f0',
    border: '1px solid #ddd',
    borderRadius: '4px',
    cursor: 'pointer',
  },
};

// 排序项组件
const SortableItem = SortableElement(({ value }) => <div style={styles.item}>{value}</div>);

// 排序容器组件
const SortableList = SortableContainer(({ items }) => (
  <div style={styles.list}>
    {items.map((value, index) => (
      <SortableItem key={`item-${index}`} index={index} value={value} />
    ))}
  </div>
));

const TestDrag = () => {
  const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3', 'Item 4']);

  const onSortEnd = ({ oldIndex, newIndex }) => {
    setItems(arrayMove(items, oldIndex, newIndex));
  };

  return (
    <div style={styles.container}>
      <SortableList items={items} onSortEnd={onSortEnd} useDragHandle />
    </div>
  );
};

export default TestDrag;
